<template>
  <div class="contain-body abfa-box">
    <Title></Title>
    <div class="search-contain-body">
      <el-form ref="form" inline :model="form" label-width="75px">
        <el-form-item>
          <div class="d-ib font-table" slot="label">预案名称：</div>
          <el-input v-model="form.rwmcs"></el-input>
        </el-form-item>
		<el-form-item>
		  <div class="d-ib font-table" slot="label">预案类型：</div>
		  <el-select v-model="form.rwlxs" placeholder="请选择预案类型">
		    <el-option label="1" value=""></el-option>
		    <el-option label="2" value=""></el-option>
		  </el-select>
		</el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" class="button-search" @click="onSubmit">搜索</el-button>
		  <!-- <el-button icon="el-icon-delete" class="button-delete" @click="doclear">清空</el-button> -->
        </el-form-item>
      </el-form>

    </div>
    <div>
      <div class="pos-r">
        <Title msg="信息列表"></Title>
        <div class="pos-a" style="right: 0">
          <el-button @click="openOptions('add')" type="primary" icon="el-icon-plus">
            新增
          </el-button>
        </div>
      </div>
      <CustomTable
          :columns="columns"
		  :total="total"
          :table-data="tableData"
		  :pagination="pagination"
		  @pagination="paginationChange">
        <div slot="options" slot-scope="scope">
          <el-button @click="openOptions('details',scope.data)" style="margin-left: 4px;" class="button-blur">详情</el-button>
          <el-button @click="openOptions('update',scope.data)" style="margin-left: 4px;" class="button-green">编辑</el-button>
          <el-button @click="deleteDate(scope.data)" style="margin-left: 4px;" class="button-red">删除</el-button>
        </div>
      </CustomTable>
    </div>

    <el-dialog
        width="819px"
        center
        :class="['custom-dialog-fill','font-table']" title=""
        :visible.sync="dialog.open"
		:close-on-click-modal="false">

      <div class="dialog-title" slot="title">
        {{ dialog.title }}
      </div>

      <div class="d-f jc-c">
        <el-form class="font-table " style="color: #000000;" ref="form" :model="form" label-width="75px" v-if="dialog.type!='details'">
          <el-form-item>
            <div class="d-ib font-table" slot="label">预案名称：</div>
            <el-input v-model="form.yamc"></el-input>
          </el-form-item>
		  <el-form-item>
		  <div class="d-ib font-table" slot="label">预案类型：</div>
		    <el-select v-model="form.yalx" placeholder="请选择预案类型">
			  <el-option label="1" value="1"></el-option>
			  <el-option label="2" value="2"></el-option>
		    </el-select>
		  </el-form-item>
		  <el-form-item>
			<div class="d-ib font-table" slot="label">预案内容：</div>
			<el-input type="textarea" :rows="3" v-model="form.yanr" ></el-input>
		  </el-form-item>
		 <el-form-item>
			<div class="d-ib font-table" slot="label">处置任务：</div>
			<el-input type="textarea" :rows="3" v-model="form.yaczrw"></el-input>
		 </el-form-item> 
        </el-form>
		
		<el-form class="font-table " style="color: #000000;" ref="form" :model="form" label-width="75px" v-if="dialog.type=='details'">
		  <el-form-item>
		    <div class="d-ib font-table" slot="label">预案名称：</div>
		    <el-input v-model="form.yamc" readonly></el-input>
		  </el-form-item>
		  <div class="d-f jc-c form-security">
		    <el-form-item>
		      <div class="d-ib font-table" slot="label">预案类型：</div>
			  <el-input v-model="form.yalx" readonly></el-input>
		    </el-form-item>
			<el-form-item v-if="dialog.type=='details'">
			    <div class="d-ib font-table" slot="label">更新时间：</div>
			    <el-input v-model="form.gxsj" readonly></el-input>
			</el-form-item>
		  </div>
		  <el-form-item>
			<div class="d-ib font-table" slot="label">预案内容：</div>
			<el-input type="textarea" :rows="3" v-model="form.yanr" readonly></el-input>
		  </el-form-item>
		  <el-form-item>
			<div class="d-ib font-table" slot="label">处置任务：</div>
			<el-input type="textarea" :rows="3" v-model="form.yaczrw" readonly></el-input>
		  </el-form-item> 
		</el-form>
      </div>
      <div class="d-f jc-c">
        <div v-if="dialog.type=='details'">
          <el-button
              class="button-cancel"
              @click="dialog.open = false">确 定
          </el-button>
        </div>
        <div v-if="dialog.type=='add'">
          <el-button
              class="button-cancel"
              @click="dialog.open = false">取 消
          </el-button>
          <el-button
              class="button-submit mr58"
              @click="addYjclya">确 定
          </el-button>
        </div>
        <div v-if="dialog.type=='update'">
          <el-button
              class="button-cancel"
              @click="dialog.open = false">取 消
          </el-button>
          <el-button
              class="button-submit mr58"
              @click="updateYjclya">确 定
          </el-button>
        </div>
      </div>

    </el-dialog>

  </div>
</template>

<script>
import Title from "../../components/Title";
import CustomTable from "../../components/CustomTable";
import dxhdUrl from "../../config/config";
import formateDate from "../../config/date";

export default {
  name: "Abfa",
  components: {Title, CustomTable,dxhdUrl,formateDate},
  data() {
    return {
	  total: 0,
	  pagination: {},
      dialog: {
        title: 's',
        open: false,
        type: 'details',//'edit','add','details'
      },
      form: {
        name: '',
        schemeName: '',
        activityName: '',
        region: '',
        date: '',
        bigEvent: '',
        shape: '',
        approval: '',
        desc: '',
        remark: ''
      },
      tableData: [
        
      ],
      params: {
        current: 1,
        size: 10,

      },
      columns: [
        {
          key: 'yamc',
          label: '预案名称'
        },
		{
          key: 'yalx',
          label: '预案类型'
        },
		{
		  key: 'yanr',
		  label: '预案内容'
		},
        {
          key: 'yaczrw',
          label: '预案处置任务'
        },
        {
          key: 'gxsj',
          label: '数据更新时间'
        },
		{
		  key: 'ctm',
		  label: '创建时间'
		},
        {
          key: 'options',
          label: '操作',
          width: '243px',
          slot: true
        }
      ],
    }
  },
  mounted() {
    // this.getList();
  },
  methods: {
    onSubmit() {
      this.getList(this.pagination.pageNum, this.pagination.pageSize);
    },
    openOptions(params,data) {
      this.dialog.type = params
      if (params == 'add') {
        this.dialog.title = '新增应急处置预案';
		this.form = {};
      }
      if (params == 'details') {
        this.dialog.title = '应急处置预案详情';
		this.form = data;
      }
      if (params == 'update') {
        this.dialog.title = '应急处置预案编辑';
		this.form = data;
      }
      this.dialog.open = true
    },
	paginationChange (e) {
	  this.pagination = e;
	  this.getList(this.pagination.pageNum, this.pagination.pageSize);
	},
    getList (page, limit) {
      this.axios.post(dxhdUrl.dxhdUrl+'dxhd-yjczya/selectPage', { 
        current: page,
        size: limit,
        entity: {
          yamc: this.form.yamcs || '',
          yalx: this.form.yalxs || '',
        }
      }).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      }).catch((error) => {
		  this.$message({
		      message: '数据查询失败！'+error,
			  type: 'error',
		  });
      });
    },
	addYjclya(){
		this.axios.post(dxhdUrl.dxhdUrl+'dxhd-yjczya/save', this.form,).then((res) => {
		  if(res.code == "1"){
			  this.$message({
				  message: '数据保存成功！',
				  type: 'success',
				  offset:300
			  });
		  }
		  this.dialog.open = false;
		  this.getList(1,10);
		}).catch((error) => {
		  this.$message({
			  message: '数据保存失败！'+error,
			  type: 'error',
		  });
		});
	},
	updateYjclya(){
		this.axios.post(dxhdUrl.dxhdUrl+'dxhd-yjczya/updateById', this.form,).then((res) => {
		  if(res.code == "1"){
			  this.$message({
				  message: '数据保存成功！',
				  type: 'success',
				  offset:300
			  });
		  }
		  this.dialog.open = false;
		  this.getList(1,10);
		}).catch((error) => {
		  this.$message({
			  message: '数据保存失败！'+error,
			  type: 'error',
		  });
		});
	},
    deleteDate(data) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '关闭',
        type: ''
      }).then(() => {
		this.delete(data.yabhsj);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
	  
    },
	
	delete(yabhsj){
		var params = new URLSearchParams();
		params.append('Id',yabhsj );   
		this.axios.post(dxhdUrl.dxhdUrl+'dxhd-yjczya/removeById', params,
		).then((res) => {
		  if(res.code == "1"){
			  this.$message({
				  message: '数据删除成功！',
				  type: 'success',
				  offset:300
			  });
			  this.getList(1,10);
		  }
		}).catch((error) => {
		  this.$message({
			  message: '数据删除失败！'+error,
			  type: 'error',
		  });
		});
	},
	
  }
}
</script>

<style lang="scss">
.abfa-box {
  .mb-14 {
    margin-bottom: 14px;
  }

  .mr111 {
    margin-right: 111px;
  }

  .mr58 {
    margin-right: 58px;
  }

}


.abfa-add {
  color: #436AA3;
  line-height: 17px;

  span {
    display: inline-block;
  }
}

.add-attachment {
  background-image: url("../../assets/imgs/add_attachment.svg");
  background-size: 17px 17px;
  background-position: 0 1px;
  background-repeat: no-repeat;
  width: 17px;
  height: 17px;
  display: inline-block;
}

.add_photos {
  background-image: url("../../assets/imgs/add_photos.svg");
  background-size: 17px 17px;
  background-position: 0 1px;
  background-repeat: no-repeat;
  width: 17px;
  height: 17px;
  display: inline-block;
}

.scheme-preview {
  .el-input-group {
    width: 430px;
  }

  .button-submit {
    padding: 6px 22px;
  }
}

.custom-dialog-fill {
  .form-security {
    .el-form-item__content {
      width: 205px !important;
    }
  }

}
.form-security {
  img {
	width: 122px;
	height: 140px;
	background-size: cover;
	background-image: url(../../assets/imgs/revie_picture.png);
  }
}
</style>

